<template>
	<view class="mine">
		<movable-area class="movable-area">
			<view class="mine-header">
				<view class="userInfo">
					<image :src="userInfo.avatar" class="hearder"></image>

					<view class="user_left_info">
						<view class="user_name_vip_id">
							<view class="user_name">
								{{userInfo.userName}}
							</view>
							<view class="user_id">
								#{{userInfo.UserId}}
							</view>
							<!-- <view class="user_vip" v-if="userInfo.memberLevel==1||userInfo.memberLevel==2">
			 
			 				</view> -->
						</view>
						<view class="member">
							<image src="@/static/member/image6.png" v-if='userInfo.trueLevel==0' class='members_icon'
								mode=""></image>
							<image src="@/static/member/image7.png" v-if='userInfo.trueLevel==1' class='member_icon'
								mode=""></image>
							<image src="@/static/member/image8.png" v-if='userInfo.trueLevel==2' class='members_icon'
								mode=""></image>
							<image src="@/static/member/image5.png" v-if='userInfo.trueLevel==3' class='member_icon'
								mode=""></image>

							<image src="@/static/member/image2.png" v-if='userInfo.groupLevel==0' class='member_icon'
								mode=""></image>
							<image src="@/static/member/image3.png" v-if='userInfo.groupLevel==1' class='members_icon'
								mode=""></image>
							<image src="@/static/member/image4.png" v-if='userInfo.groupLevel==2' class='member_icon'
								mode=""></image>
							<image src="@/static/member/image11.png" v-if='userInfo.groupLevel>=3' class='member_icon'
								mode=""></image>


						</view>
						<view class="user_phone">
							用户手机号：{{userInfo.phone}}
						</view>
					</view>
					<view class="hhr_icon_box">
						<image :src="userInfo.partnerIcon" class='hhr_icon' mode="">
					</view>
					<view class="vips_icon_box">
						<image src="@/static/member/image1.png" v-if='userInfo.memberLevel==0' class='vips_icon'
							mode="">
						</image>
						<image src="@/static/member/image9.png" v-if='userInfo.memberLevel==1' class='vips_icon'
							mode="">
						</image>
						<image src="@/static/member/image10.png" v-if='userInfo.memberLevel==2' class='vips_icon'
							mode="">
						</image>
					</view>


				</view>
			</view>

			<view class="mine-content">
				<view class="content_header_bottom">
					<view class="header">
						<view class='header-left' @click.stop='goBill(1)'>
							<view class='top-text'>多多券</view>
							<view class="gatheringBox">
								<view class='bottom-text'>{{walletInfo.balance}}</view>
								<!-- <image src="/static/mine/payment-code.png" mode="" class="gatheringImg"
									@click.stop="goGathering"></image> -->
							</view>
						</view>
						<view class="header-right" @tap="goUrl({id:1,title:'我要兑换'})">
							立即兑换
						</view>
					</view>
					<view class="bottom">
						<view class="bottom-item" @tap="goBill(7)">
							<view class='number'>{{jinwei(walletInfo.happyBean)}}</view>
							<view class="text">
								多贝
								<image class='right-icon' src="@/static/statc-icon/right.png" mode=""></image>
							</view>
						</view>
						<view class="bottom-item" @tap="goBill(3)">
							<view class='number'>{{jinwei(walletInfo.withdrawVoucher)}}</view>
							<view class="text">
								兑换券
								<image class='right-icon' src="@/static/statc-icon/right.png" mode=""></image>
							</view>
						</view>
						<view class="bottom-item" @tap="goBill(8)">
							<view class='number'>{{jinwei(walletInfo.goodsVoucher)}}</view>
							<view class="text">
								提货券
								<image class='right-icon' src="@/static/statc-icon/right.png" mode=""></image>
							</view>
						</view>
						<!-- <view class="bottom-item" @tap="goBill(2)">
			 				<view class='number'>{{jinwei(walletInfo.buyVoucher)}}</view>
			 				<view class="text">
			 					购物券
			 					<image class='right-icon' src="@/static/statc-icon/right.png" mode=""></image>
			 				</view>
			 			</view> -->
						<view class="bottom-item" @tap="goBill(4)">
							<view class='number'>{{jinwei(walletInfo.withdrawAmount)}}</view>
							<view class="text">
								兑换积分
								<image class='right-icon' src="@/static/statc-icon/right.png" mode=""></image>
							</view>
						</view>
						<view class="bottom-item" @tap="goBill(6)">
							<view class='number'>{{jinwei(walletInfo.greenIntegral)}}</view>
							<view class="text">
								数字积分
								<image class='right-icon' src="@/static/statc-icon/right.png" mode=""></image>
							</view>
						</view>
						<view class="bottom-item">
							<view class='number'>{{jinwei(walletInfo.allSummary)}}</view>
							<view class="text">
								预估积分
								<!-- <image class='right-icon' src="@/static/statc-icon/right.png" mode=""></image> -->
							</view>
						</view>
						<view class="bottom-item">
							<view class='number'>{{jinwei(walletInfo.saleSummary)}}</view>
							<view class="text">
								出售中积分
								<!-- <image class='right-icon' src="@/static/statc-icon/right.png" mode=""></image> -->
							</view>
						</view>
						<view class="bottom-item" @tap="goBill(9)">
							<view class='number'>{{jinwei(walletInfo.equityIntegral)}}</view>
							<view class="text">
								释放积分
								<image class='right-icon' src="@/static/statc-icon/right.png" mode=""></image>
							</view>
						</view>
						<view class="bottom-item" @tap="goBill(10)">
							<view class='number'>{{jinwei(walletInfo.specialVoucher )}}</view>
							<view class="text">
								助力积分
								<image class='right-icon' src="@/static/statc-icon/right.png" mode=""></image>
							</view>
						</view>
						<view class="bottom-item" @tap="goBill(11)">
							<view class='number'>{{jinwei(walletInfo.liveVoucher )}}</view>
							<view class="text">
								生活积分
								<image class='right-icon' src="@/static/statc-icon/right.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="mine-Statistics">
					<view class="statistics-left">
						<view class='box'>
							<view class='box-label'>目标</view>
							<view class='box-value'>
								目标:{{balancePoolPercent.target}}
							</view>
						</view>
						<view style='display: flex;justify-content: space-between'>
							<view class=" box-bottom">
								<view class='box-label'>累计</view>
								<view class='box-bottom-value'>
									{{balancePoolPercent.profitSummary}}
								</view>
							</view>
							<piaoyiProgressBar canvasId="progressCanvas4" class='progress-circle'
								:progress="positionDate" backgroundColor="#F2F2F2" progressBackgroundColor="#FFC176"
								:showText="true" textColor="#000" :textSize="24" :isCircular="true" :height='10'
								:diameter="100">
							</piaoyiProgressBar>

						</view>
					</view>
					<view class="statistics-right">
						<view class='box'>
							<view class='box-label'>总额</view>
							<view class='box-value'>
								积分总额:{{balancePoolPercent.allGreen}}
							</view>
						</view>

						<view style='display: flex;justify-content: space-between'>
							<view class=" box-bottom">
								<view class='box-label'>积分价格:</view>
								<view class='box-bottom-value'>
									{{balancePoolPercent.greenIntegralPrice}}
								</view>
							</view>
							<view class=" box-bottom">
								<view class='box-label'>已应用:</view>
								<view class='box-bottom-value'>
									{{balancePoolPercent.useGreen}}
								</view>
							</view>
						</view>
					</view>

				</view>

				<view class="commonfun">
					<view class="title">
						常用功能
					</view>
					<div class='funList'>
						<view class="funList-item mb-30" v-for="(item,index) in commonList" :key="index"
							@tap="goUrl(item)">
							<image :src="item.img" class='icon' mode=""></image>
							<view class="text">
								{{item.title}}
							</view>
						</view>

					</div>
				</view>

				<view class="commonfun">
					<view class="title">
						其他功能
					</view>
					<div class='funList' style='grid-template-columns: repeat(4,1fr);'>
						<view class="funList-item mb-30" v-for="(item,index) in otherList" :key="index"
							@tap="goUrl(item)">
							<image :src="item.img" class='icon' mode=""></image>
							<view class="text">
								{{item.title}}
							</view>
						</view>
					</div>
				</view>
				<!-- <view class="recorded">
					<text>浙ICP备2025155851号-2A</text>
				</view> -->
			</view>
			<!-- <liu-drag-button :userInfo="userInfo" ></liu-drag-button> -->
			<!-- <companyInfo /> -->


		</movable-area>

	</view>
</template>

<script>
	import companyInfo from "@/components/basicComponents/companys.vue"
	import piaoyiProgressBar from '@/uni_modules/piaoyi-progress-bar/components/piaoyi-progress-bar/piaoyi-progress-bar.vue';
	// import progressBox from '@/components/progressBox/progress-box.vue';
	import {
		personalData,
		walletInfo,
		userBalance,
		getBalancePoolPercent
	} from '../../api/api.js';
	export default {
		name: 'mine',
		components: {
			piaoyiProgressBar,
			companyInfo,
		},
		data() {
			return {
				// 用户信息
				userInfo: '',
				// 钱包信息
				walletInfo: '',
				x: 0,
				y: 0,
				old: {
					x: 0,
					y: 0
				},
				// 推荐码
				code: '',
				commonList: [
					// {
					// 	id: 13,
					// 	title: '多多券购买',
					// 	img: '../../static/static-home/image-27.png'
					// },

					{
						id: 2,
						title: '我要互转',
						img: '../../static/static-home/image-31.png'
					},
					// {
					// 	id: 3,
					// 	title: '易货记录',
					// 	img: '../../static/static-home/image-43.png'
					// },
					{
						id: 4,
						title: '我的商品',
						img: '../../static/static-home/image-29.png'
					},
					// {
					// 	id: 16,
					// 	title: '我的仓库',
					// 	img: '../../static/static-home/image-47.png'
					// },
					// {
					// 	id: 666,
					// 	title: '下载添信',
					// 	img: '../../static/static-home/image-58.png'
					// },
					// {
					// 	id: 23,
					// 	title: '我要跨转',
					// 	img: '../../static/static-home/kz.png'
					// },
					// {
					// 	id: 22,
					// 	title: '添星生活',
					// 	scheme:'tianxinlife://txh',
					// 	url:"https://txsh.xunyetech.xyz",
					// 	img: '../../static/static-home/bdlife.png'
					// },
				],
				otherList: [{
						id: 5,
						title: '我的社区',
						img: '../../static/static-home/image-28.png'
					},
					// {
					// 	id: 6,
					// 	title: '银行卡信息',
					// 	img: '../../static/static-home/image-32.png'
					// },
					{
						id: 7,
						title: '实名中心',
						img: '../../static/static-home/image-36.png'
					},
					{
						id: 8,
						title: '邀请好友',
						img: '../../static/static-home/image-38.png'
					},
					{
						id: 9,
						title: '安全中心',
						img: '../../static/static-home/image-39.png'
					},
					{
						id: 10,
						title: '商家联盟',
						img: '../../static/static-home/image-30.png'
					},
					{
						id: 14,
						title: '收货地址',
						img: '../../static/static-home/image-37.png'
					},
					{
						id: 11,
						title: '设置中心',
						img: '../../static/static-home/image-41.png'
					},
					// {
					// 	id: 15,
					// 	title: '公益积分',
					// 	img: '../../static/static-home/image-48.png'
					// },
					{
						id: 18,
						title: '绑定交易帐户',
						img: '../../static/static-home/image-32.png'
					},
					// {
					// 	id: 21,
					// 	title: '参拍计算器',
					// 	img: '../../static/static-home/calculator.png'
					// },
					{
						id: 250,
						title: '合伙人',
						img: '../../static/static-home/hhr.png'
					},
				],
				balancePoolPercent: {},
				positionDate: 0
			}
		},
		onShow() {
			// 获取个人资料
			this.getInfo()
			// 获取个人中心钱包数据
			this.getWallet()
			// 获取资金池百分比
			this.getBalancePoolPercent()
			this.code = uni.getStorageSync('invitationCode')
			const systemInfo = uni.getSystemInfoSync();
			this.x = systemInfo.screenWidth - 100;
			this.y = systemInfo.screenHeight - 120;
		},
		computed: {
			// positionData(){
			// 	return ||0
			// }
		},
		onLoad() {

		},
		methods: {
			goGathering() {
				uni.navigateTo({
					url: '/pages/mine/paymentCode'
				})
			},
			onChange: function(e) {
				this.old.x = e.detail.x
				this.old.y = e.detail.y
			},
			// 获取个人资料
			getInfo() {
				let data = {}
				personalData(data).then(res => {
					this.userInfo = res.data
					uni.setStorageSync('memberLevel', this.userInfo.memberLevel)
				})
			},
			// 获取个人中心钱包数据
			getWallet() {
				let data = {}
				userBalance(data).then(res => {
					this.walletInfo = res.data
				})
			},
			// 获取资金池百分比
			getBalancePoolPercent() {
				let data = {}
				getBalancePoolPercent(data).then(res => {
					console.log(res.data)
					this.balancePoolPercent = res.data
					this.positionDate = res.data.profitSummaryPercentage
				})
			},
			// 前往账单页面
			goBill(index) {
				uni.navigateTo({
					url: '/pages/mine/myBill?index=' + (index - 1) + '&level=' + this.userInfo.groupLevel
				})
			},
			goUrl(item) {
				if (item.id == 18) {
					uni.navigateTo({
						url: '/pages/mine/tradeAcount'
					})
				} else if (item.id == 5) {
					uni.navigateTo({
						url: '/pages/mine/myItem'
					})
				} else if (item.id == 1) {
					uni.navigateTo({
						url: '/pages/withdraw/withdrawalMoney'
					})
				} else if (item.id == 2) {
					uni.navigateTo({
						url: '/pages/mine/exchange'
					})
				} else if (item.id == 3) {
					uni.navigateTo({
						url: '/pages/index/appointmentRecord'
					})
				} else if (item.id == 8) {
					uni.navigateTo({
						url: '/pages/mine/invite'
					})
				} else if (item.id == 4) {
					uni.navigateTo({
						url: '/pages/mine/myOrder'
					})
				} else if (item.id == 7) {
					if (this.userInfo.isRealName == 1) {
						uni.showToast({
							icon: 'none',
							title: '已经进行过实名认证'
						})
						return
					}
					uni.navigateTo({
						url: '/pages/mine/realname'
					})
				} else if (item.id == 6) {
					uni.navigateTo({
						url: '/pages/set/paymentMethod'
					})
				} else if (item.id == 9) {
					uni.navigateTo({
						url: '/pages/set/securityCenter'
					})
				} else if (item.id == 10) {
					uni.navigateTo({
						url: '/pages/mine/changeLevel'
					})
				} else if (item.id == 11) {
					uni.navigateTo({
						url: '/pages/set/index'
					})
				} else if (item.id == 12) {
					uni.navigateTo({
						url: '/pages/withdraw/withdrawalMoney'
					})
				} else if (item.id == 13) {
					uni.navigateTo({
						url: '/pages/recharge/index'
					})
					// uni.navigateTo({
					// 	url: '/pages/mine/courseList/courseList'
					// })
				} else if (item.id == 14) {
					uni.navigateTo({
						url: '/pages/goods/addressList'
					})
				} else if (item.id == 15) {
					// 公益积分
					uni.navigateTo({
						url: "/pages/mine/welfare"
					})

				} else if (item.id == 16) {
					// 我的仓库
					uni.navigateTo({
						url: "/pages/mine/warehouse"
					})
				} else if (item.id == 21) {
					uni.navigateTo({
						url: "/pages/mine/calculator/calculator"
					})
				} else if (item.id == 22) {
					console.log(item.scheme);
					//#ifdef APP-PLUS
					plus.runtime.openWeb(item.url)
					//#endif
					//#ifdef H5
					window.location.href = item.url
					//#endif
				} else if (item.id == 23) {
					uni.navigateTo({
						url: "/pages/mine/crossBorder/crossBorder"
					})
				} else if (item.id == 666) {
					uni.navigateTo({
						url: "/pages/downloadTx/downloadTx"
					})
				} else if (item.id == 17) {
					// debugger
					// 我的客服
					// debugger
					if (this.userInfo.UserId == '99408893') {
						uni.navigateTo({
							url: `/pages/subpage/customer/conversations?id=${this.userInfo.UserId}&avatar=${this.userInfo.avatar}&name=${this.userInfo.userName+":"+this.userInfo.phone}`
						})
					} else {
						// 带自己的信息
						let params = {
							data: {
								avatar: this.userInfo.avatar,
								name: this.userInfo.userName + ":" + this.userInfo.phone,
							},
							lastMessage: 'at',
							top: false,
							type: "private",
							unread: 0,
							userId: this.userInfo.UserId
						}
						uni.navigateTo({
							url: `/pages/subpage/customer/privateChat?to=${JSON.stringify(params)}&id=${this.userInfo.UserId}`
						})
					}
				} else if (item.id == 250) {
					uni.navigateTo({
						url: '/pages/mine/partner'
					})
				}
			}
		}
	}
</script>

<style scoped>
	.mine {
		/* background: #55AB00; */
		width: 100vw;
		height: calc(100vh - 100rpx);
		padding-bottom: 300rpx;
	}

	.movable-area {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: calc(100vh - 100rpx);
	}

	.mine-header {
		width: 100%;
		/* height: 202rpx; */
		background: url("@/static/static-home/image54.png") no-repeat;
		background-size: 100% 100%;
		padding: 0 40rpx 40rpx;
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
	}

	.mine-header .title {
		font-weight: bold;
		font-size: 44rpx;
		color: #FFFFFF;
		padding-left: 40rpx;
		padding-top: 102rpx;
		box-sizing: border-box;

	}

	.mine-header .userInfo {

		width: 100%;
		height: 104rpx;
		display: flex;
		padding-left: 40rpx;
		padding-top: 50rpx;
		position: relative;

	}

	.mine-header .userInfo .hearder {
		width: 104rpx;
		height: 104rpx;
		border-radius: 130rpx;
		overflow: hidden;
	}

	.mine-header .userInfo .user_left_info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;

		margin-left: 28rpx;

	}

	.mine-header .userInfo .user_left_info .user_name_vip_id {
		display: flex;
		margin-bottom: 14rpx;
		align-items: flex-end;
	}

	.mine-header .userInfo .user_left_info .user_name_vip_id .user_name {
		font-weight: 500;
		font-size: 32rpx;
		color: #6F6F6F;
	}

	.mine-header .userInfo .user_left_info .user_name_vip_id .user_id {
		font-weight: 400;
		font-size: 24rpx;
		color: #6F6F6F;
		margin-left: 8rpx;
	}

	.mine-header .userInfo .user_left_info .user_name_vip_id .user_vip {
		width: 62rpx;
		height: 22rpx;
		background: url("@/static/static-home/image-35.png") no-repeat;
		background-size: cover;
		margin-left: 8rpx;
	}

	.mine-header .userInfo .user_left_info .user_phone {
		font-weight: 400;
		font-size: 24rpx;
		color: #6F6F6F;
	}

	.mine-content {
		width: 100vw;
		min-height: calc(100vh - 440rpx);

		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		margin-top: -20rpx;
		background: #F7F6FB;
		/* box-shadow: inset 0px 10px 15px -3px #CEF0AE; */
		padding: 20rpx 20rpx;
		box-sizing: border-box;
	}

	.mine-content .content_header_bottom {
		width: 100%;
		height: auto;
		background: #fff;
	}

	.mine-content .content_header_bottom .header {
		width: 100%;
		height: 128rpx;
		background: url("@/static/static-home/image-40.png") no-repeat;
		background-size: 100% 100%;
		padding: 0 40rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.mine-content .content_header_bottom .header .header-left {
		display: flex;
		flex-direction: column;
	}

	.mine-content .content_header_bottom .header .header-left .top-text {
		font-weight: bold;
		font-size: 28rpx;
		color: #FDBA69;
	}

	.mine-content .content_header_bottom .header .header-left .bottom-text {
		font-weight: 400;
		font-size: 40rpx;
		color: #FFFFFF;
	}

	.gatheringBox {
		display: flex;
		align-items: center;
	}

	.gatheringImg {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}

	.mine-content .content_header_bottom .header .header-right {
		width: 172rpx;
		height: 64rpx;
		background: linear-gradient(90deg, #FEE3BE 0%, #FBC985 100%);
		box-shadow: inset 0px 8rpx 8rpx 0px rgba(255, 255, 255, 0.25);
		border-radius: 38rpx;
		display: flex;
		font-weight: bold;
		font-size: 28rpx;
		color: #8F622A;
		justify-content: center;
		align-items: center;
	}

	.mine-content .content_header_bottom .bottom {
		width: 100%;
		height: 238rpx;
		background: #fff;
		display: grid;
		grid-template-columns: repeat(4, 1fr);

	}

	.mine-content .content_header_bottom .bottom .bottom-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.mine-content .content_header_bottom .bottom .bottom-item .number {

		font-weight: 500;
		font-size: 40rpx;
		color: #D23A37;
		margin-bottom: 12rpx;
	}

	.mine-content .content_header_bottom .bottom .bottom-item .text {
		font-weight: 400;
		font-size: 24rpx;
		color: #979797;
		display: flex;
		align-items: center;
	}

	.right-icon {
		width: 14rpx;
		height: 18rpx;
	}

	.commonfun {
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 8rpx 0px rgba(244, 244, 244, 0.25);
		border-radius: 4rpx;
		margin-top: 20rpx;
		padding: 20rpx 0rpx;
		box-sizing: border-box;
	}

	.commonfun .title {
		font-weight: bold;
		font-size: 28rpx;
		color: #2F2F33;
		padding: 0rpx 22rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}

	.commonfun .funList {
		display: grid;
		grid-template-columns: repeat(4, 2fr);
	}

	.commonfun .funList .funList-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.commonfun .funList .funList-item .icon {
		width: 48rpx;
		height: 48rpx;
	}

	.commonfun .funList .funList-item .text {
		font-weight: 400;
		font-size: 26rpx;
		color: #2F2F33;
		margin-top: 12rpx;
	}

	.mb-30 {
		margin-bottom: 30rpx;
	}

	.mine-Statistics {
		width: 100%;
		height: 244rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 16rpx;
	}

	.mine-Statistics .statistics-left {
		width: 304rpx;
		height: 244rpx;
		background: url("@/static/static-home/image-33.png") no-repeat;
		background-size: 100% 100%;
		padding: 36rpx 20rpx;
		box-sizing: border-box;
	}


	.mine-Statistics .statistics-right {
		width: 384rpx;
		height: 244rpx;
		background: url("@/static/static-home/image-34.png") no-repeat;
		background-size: 100% 100%;
		padding: 36rpx 20rpx;
		box-sizing: border-box;
	}

	.box {
		display: flex;
		flex-direction: column;
		margin-bottom: 26rpx;
	}


	.box .box-label {
		font-weight: bold;
		font-size: 28rpx;
		color: #2F2F33;
		margin-bottom: 24rpx;
	}

	.box .box-value {
		font-weight: 400;
		font-size: 24rpx;
		color: #979797;
	}


	.box-bottom {
		display: flex;
		flex-direction: column;
	}

	.box-bottom .box-label {
		font-weight: bold;
		font-size: 28rpx;
		color: #2F2F33;
		margin-bottom: 30rpx;

	}

	.box-bottom .box-bottom-value {
		font-weight: 400;
		font-size: 28rpx;
		color: #141519;
	}

	.progress-circle {
		margin-top: -10rpx;
		margin-left: 25rpx;
	}

	/deep/ .zui-progress-circle-slot {
		font-weight: 400;
		font-size: 34rpx;
		color: #000000;
	}

	.hhr_icon_box {
		width: 100rpx;
		height: 56rpx;
		position: absolute;
		top: 42rpx;
		right: 40rpx;
	}

	.hhr_icon {
		width: 56rpx;
		height: 56rpx;
	}

	.vips_icon_box {
		width: 146rpx;
		height: 56rpx;
		position: absolute;
		/* top: 42rpx; */
		top: 102rpx;
		right: 40rpx;
	}

	.vips_icon {
		width: 146rpx;
		height: 56rpx;
	}

	.member {
		display: flex;
		margin-bottom: 10rpx;
	}

	.member_icon {
		width: 134rpx;
		height: 24rpx;
		margin-right: 18rpx;
	}

	.members_icon {
		width: 110rpx;
		height: 24rpx;
		margin-right: 18rpx;
	}


	.customerBtn {
		width: 148rpx;
		height: 56rpx;
		background: linear-gradient(180deg, #06BEFD 0%, #2176DA 100%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		font-weight: 600;
		font-size: 26rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.customerBoxIcon {
		width: 120rpx;
		height: 120rpx;
		position: absolute;
		top: -100rpx;
		left: 50%;
		right: 50%;
		transform: translateX(-50%);
	}

	.recorded {
		margin-top: 30rpx;
		text-align: center;
		color: #999999;
		opacity: 0.6;
		font-size: 26rpx;
		width: 100%;
	}
</style>